<ui:composition
 xmlns="http://www.w3.org/1999/xhtml"
 xmlns:ui="http://java.sun.com/jsf/facelets"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:rich="http://richfaces.org/rich" 
 xmlns:a4j="http://richfaces.org/a4j"
 template="/template.xhtml">
  <h:head>
<h:outputStylesheet
   library="css">
.categoriee{
	
  background-color:#F8E798;

}
</h:outputStylesheet>
</h:head>
 <ui:define name="center">
  <b><h:outputText value="#{boutiqueBacking.category.title}" style="padding-left:20px;font-size:1.5em"/></b>
  <rich:dataTable   value="#{boutiqueBacking.listBook}" var="book" style="border:none;width:100%">
   <!-- <f:facet name="header"><b><h:outputText value="#{boutiqueBacking.category.title}" /></b></f:facet> -->
  <h:column style="border:none">
  <rich:panel  styleClass="pan" style="background-color:#C0D9D9; width:100%;">
    
    
    <table style="width:100%;">
    <TR>
    <td style="width:100%">
    <h:commandLink
    action="#{boutiqueBacking.selectBook(book.id)}"
    immediate="true">
   
    <b><h:outputText value="#{book.title}" style="font-size:2.5em"/></b>
    </h:commandLink>
    <br/><br/>
    <i><h:outputText value="#{book.date}" ><f:convertDateTime pattern="dd/MM/yyyy" /></h:outputText></i>
    <br/><br/>
    <h:outputText value="#{strings['Book.ecrispar']}" /><h:outputText value=" : " />
    <h:dataTable   value="#{book.authors}" var="author" style="border:none;background-color:#C0D9D9">
    <h:column style="border:none">
    <h:outputText value="#{author.firstName}" /><h:outputText value=" " /><h:outputText value="#{author.lastName}" />
    </h:column>
    </h:dataTable>
    <br/>	   
    
    <span style="font-size:2em;"><h:outputText value="#{book.price}" /><h:outputText value=" &#8364;" /></span>

    <br/><br/>
    <h:panelGroup rendered="#{!boutiqueBacking.presentPanier(book.id)}">
    <h:outputText value="#{strings['Order.produitabsent']}" />
    <h:outputText value=", " />
    <h:commandLink   action="#{boutiqueBacking.addPanier(book.id)}"  immediate="true">
    <h:outputText value="#{strings['Order.ajouterpanier']}" />
    </h:commandLink>
    <h:outputText value="." />
    </h:panelGroup>
    <h:panelGroup rendered="#{boutiqueBacking.presentPanier(book.id)}">
    <h:outputText value="#{boutiqueBacking.cbPresentPanier(book.id)}" />
    <h:outputText value=" " />
    <h:outputText value="#{strings['Order.exemplairedans']}" />
    <h:outputText value=", " />
    <h:commandLink   action="#{boutiqueBacking.addPanier(book.id)}"  immediate="true">
    <h:outputText value="#{strings['Order.rajouter']}" />
    </h:commandLink>
    <h:outputText value=" " />
     <h:outputText value="#{strings['Order.ou']}" />
    <h:outputText value=" " />
    <h:commandLink   action="#{boutiqueBacking.retirerPanier(book.id)}"  immediate="true">
    <h:outputText value="#{strings['Order.enlever']}" />
    </h:commandLink>
    <h:outputText value="." />
    </h:panelGroup>
    </td>
    <td style="text-align:right">
	<rich:panel styleClass="pan" style="padding:5px;margin:10px">
	<a4j:mediaOutput  mimeType="image/jpeg" createContent="#{boutiqueBacking.paintImageId}" element="img" value="#{book.id}"/>
	</rich:panel>
	</td>
    </TR>
    
    </table>
    </rich:panel>
  </h:column>
  </rich:dataTable>
 </ui:define>
</ui:composition>
